<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>给我最爱的宝贝 ❤️</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF5E87',
                        secondary: '#FFD700',
                        love: '#FF3366',
                    },
                    fontFamily: {
                        dancing: ['"Dancing Script"', 'cursive'],
                        youyuan: ['"YouYuan"', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
            }
            .text-glow {
                text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.5);
            }
            .pulse-slow {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .float {
                animation: float 3s ease-in-out infinite;
            }
            .heart-beat {
                animation: heartBeat 1.5s ease-in-out infinite;
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        
        @keyframes heartBeat {
            0% {
                transform: scale(1);
            }
            14% {
                transform: scale(1.1);
            }
            28% {
                transform: scale(1);
            }
            42% {
                transform: scale(1.1);
            }
            70% {
                transform: scale(1);
            }
        }
        
        .falling {
            position: fixed;
            top: -50px;
            pointer-events: none;
            z-index: 100;
        }
        
        .carousel-item {
            display: none;
            animation: fade 1.5s ease-in-out;
        }
        
        .carousel-item.active {
            display: block;
        }
        
        @keyframes fade {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        body {
            overflow-x: hidden;
        }
    </style>
    
    <!-- 微信分享配置 -->
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta property="og:title" content="给我最爱的宝贝 ❤️">
    <meta property="og:description" content="生日快乐，我永远爱你！">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://picsum.photos/id/1039/600/315">
    <meta property="og:url" content="your-url-here">
</head>
<body class="bg-gradient-to-br from-pink-300 to-yellow-200 min-h-screen flex flex-col items-center justify-center p-4">
    <!-- 顶部标题 -->
    <h1 class="text-[clamp(2.5rem,8vw,4rem)] font-dancing text-white text-shadow text-glow heart-beat mb-6 text-center">
        Happy Birthday, My Love ❤️
    </h1>
    
    <!-- 浪漫消息区域 -->
    <div id="message" class="font-youyuan text-[clamp(1.2rem,5vw,1.8rem)] text-gray-800 bg-white/70 backdrop-blur-sm rounded-xl p-5 shadow-lg max-w-md mx-auto mb-8 text-center">
        愿你的生日如璀璨星辰般闪耀，幸福永远与你相伴！
    </div>
    
    <!-- 图片轮播 -->
    <div class="relative w-full max-w-md aspect-square overflow-hidden rounded-2xl shadow-2xl mb-8">
        <div id="carousel" class="w-full h-full">
            <!-- 浪漫图片集合 - 更适合情侣的图片 -->
            <div class="carousel-item active">
                <img src="https://picsum.photos/id/1039/800/800" alt="浪漫图片1" class="w-full h-full object-cover">
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/id/1067/800/800" alt="浪漫图片2" class="w-full h-full object-cover">
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/id/146/800/800" alt="浪漫图片3" class="w-full h-full object-cover">
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/id/152/800/800" alt="浪漫图片4" class="w-full h-full object-cover">
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/id/1074/800/800" alt="浪漫图片5" class="w-full h-full object-cover">
            </div>
        </div>
        
        <!-- 轮播指示器 -->
        <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
            <button class="w-3 h-3 rounded-full bg-white/70 carousel-indicator active" data-index="0"></button>
            <button class="w-3 h-3 rounded-full bg-white/40 carousel-indicator" data-index="1"></button>
            <button class="w-3 h-3 rounded-full bg-white/40 carousel-indicator" data-index="2"></button>
            <button class="w-3 h-3 rounded-full bg-white/40 carousel-indicator" data-index="3"></button>
            <button class="w-3 h-3 rounded-full bg-white/40 carousel-indicator" data-index="4"></button>
        </div>
        
        <!-- 轮播控制按钮 -->
        <button id="prev-btn" class="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/50 transition-all">
            <i class="fa fa-chevron-left"></i>
        </button>
        <button id="next-btn" class="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/50 transition-all">
            <i class="fa fa-chevron-right"></i>
        </button>
    </div>
    
    <!-- 底部签名 -->
    <div class="text-gray-700 font-youyuan text-[clamp(1rem,3vw,1.2rem)] mt-4">
        <span class="float mr-2">❤️</span> 永远爱你的我
    </div>

    <script>
        // 浪漫祝福语集合
        const romanticMessages = [
            "你是我生命中最美的遇见，生日快乐，我的挚爱！",
            "在这个特别的日子里，愿你的笑容如阳光般灿烂，我的爱永远伴随你。",
            "你的存在让我的世界充满色彩，生日快乐，我心中的公主！",
            "爱你不止今天，而是生命中的每一天。生日快乐，我的唯一！",
            "愿我们的爱情像红酒一样，随着时间的推移越发醇香。生日快乐！",
            "你是我每天醒来的理由，是我睡前的思念。生日快乐，我的甜心！",
            "无论风雨还是晴天，我都会一直在你身边。生日快乐，我的永远！",
            "你是我生命中最珍贵的礼物，生日快乐，我会用一生去珍惜你。",
            "你的微笑是我最大的幸福，生日快乐，希望每天都能看到你的笑容。",
            "我爱你，不仅仅是今天，而是生命中的每一刻。生日快乐，我的全部！",
            "在这个特别的日子里，我想让你知道，你是我生命中最重要的人，我爱你永远不变。",
            "亲爱的，生日快乐！感谢你陪伴我走过的每一天，愿我们的爱情长长久久。",
            "愿你的生日如烟花般绚烂，如星星般闪耀。我爱你，永远永远。",
            "你是我生命中的阳光，照亮了我的每一天。生日快乐，我最爱的人！",
            "爱情是永恒的，时光是短暂的。我愿用永恒的爱情，守护你短暂的一生。生日快乐！"
        ];
        
        // 浪漫emoji集合
        const romanticEmojis = ['❤️', '💕', '💖', '💗', '💝', '🌹', '🌼', '🌸', '💍', '✨', '🌟', '🎇', '🎈', '💘', '👫', '💑'];
        
        const messageElement = document.getElementById('message');
        const carousel = document.getElementById('carousel');
        const carouselItems = document.querySelectorAll('.carousel-item');
        const indicators = document.querySelectorAll('.carousel-indicator');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        let currentSlide = 0;
        let slideInterval;
        
        // 初始化页面
        document.addEventListener('DOMContentLoaded', () => {
            // 开始轮播
            startSlideShow();
            
            // 初始化随机飘落的emoji
            setInterval(createFallingEmoji, 300);
            
            // 检测微信环境
            checkWechatEnvironment();
        });
        
        // 点击更换祝福语
        document.addEventListener('click', () => {
            const randomIndex = Math.floor(Math.random() * romanticMessages.length);
            messageElement.textContent = romanticMessages[randomIndex];
            
            // 点击时添加特殊效果
            messageElement.classList.add('pulse-slow');
            setTimeout(() => {
                messageElement.classList.remove('pulse-slow');
            }, 1000);
        });
        
        // 创建随机飘落的emoji
        function createFallingEmoji() {
            const emoji = document.createElement('div');
            emoji.classList.add('falling');
            emoji.textContent = romanticEmojis[Math.floor(Math.random() * romanticEmojis.length)];
            
            // 随机位置和样式
            emoji.style.left = Math.random() * 100 + 'vw';
            emoji.style.fontSize = Math.random() * 20 + 20 + 'px';
            emoji.style.animationDuration = Math.random() * 5 + 3 + 's';
            emoji.style.opacity = Math.random() * 0.8 + 0.2;
            
            // 随机旋转效果
            const rotation = Math.random() * 360;
            emoji.style.transform = `rotate(${rotation}deg)`;
            
            document.body.appendChild(emoji);
            
            // 移除元素
            setTimeout(() => {
                emoji.remove();
            }, 8000);
        }
        
        // 鼠标移动效果
        document.addEventListener('mousemove', (e) => {
            if (Math.random() > 0.7) { // 降低出现频率，避免过于密集
                const heart = document.createElement('div');
                heart.classList.add('falling');
                heart.textContent = '❤️';
                
                heart.style.left = e.clientX + 'px';
                heart.style.top = e.clientY + 'px';
                heart.style.fontSize = Math.random() * 10 + 15 + 'px';
                heart.style.animationDuration = Math.random() * 3 + 2 + 's';
                
                document.body.appendChild(heart);
                
                setTimeout(() => {
                    heart.remove();
                }, 5000);
            }
        });
        
        // 轮播功能
        function startSlideShow() {
            slideInterval = setInterval(nextSlide, 5000);
        }
        
        function nextSlide() {
            goToSlide(currentSlide + 1);
        }
        
        function prevSlide() {
            goToSlide(currentSlide - 1);
        }
        
        function goToSlide(n) {
            carouselItems[currentSlide].classList.remove('active');
            indicators[currentSlide].classList.remove('active', 'bg-white/70');
            indicators[currentSlide].classList.add('bg-white/40');
            
            currentSlide = (n + carouselItems.length) % carouselItems.length;
            
            carouselItems[currentSlide].classList.add('active');
            indicators[currentSlide].classList.remove('bg-white/40');
            indicators[currentSlide].classList.add('active', 'bg-white/70');
        }
        
        // 轮播控制
        prevBtn.addEventListener('click', () => {
            clearInterval(slideInterval);
            prevSlide();
            startSlideShow();
        });
        
        nextBtn.addEventListener('click', () => {
            clearInterval(slideInterval);
            nextSlide();
            startSlideShow();
        });
        
        // 点击指示器切换幻灯片
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                clearInterval(slideInterval);
                goToSlide(index);
                startSlideShow();
            });
        });
        
        // 触摸滑动支持
        let touchStartX = 0;
        let touchEndX = 0;
        
        carousel.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        }, false);
        
        carousel.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        }, false);
        
        function handleSwipe() {
            const swipeThreshold = 50;
            
            if (touchEndX - touchStartX > swipeThreshold) {
                // 右滑
                clearInterval(slideInterval);
                prevSlide();
                startSlideShow();
            } else if (touchEndX - touchStartX < -swipeThreshold) {
                // 左滑
                clearInterval(slideInterval);
                nextSlide();
                startSlideShow();
            }
        }
        
        // 检测微信环境
        function checkWechatEnvironment() {
            const ua = navigator.userAgent.toLowerCase();
            const isWechat = ua.indexOf('micromessenger') !== -1;
            
            if (isWechat) {
                // 在微信中打开的优化
                document.body.classList.add('wechat');
                
                // 隐藏微信分享提示
                document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                    WeixinJSBridge.call('hideOptionMenu');
                });
            }
        }
    </script>
</body>
</html>
    